<template>
    <div id="app">
        <div class="title_bgc">
            <!--头部导航-->
            <div class="title_nav">
                <router-link to="" @click.native="$router.back()" class="iconfont icon-fanhui"></router-link>
                <!--头部搜索-->
                <p><input type="text" placeholder="请输入搜索内容"></p>
                <!--小图标-->
                <div>
                    <span class="iconfont icon-fenxiang"></span>
                    <span class="iconfont icon-weibiaoti2fuzhi12"></span>
                    <span class="iconfont icon-home"></span>
                </div>
            </div>
            <!--中间筛选导航部分-->
            <div class="mid_nav">
                <!--左边下拉菜单-->
                <select name="" id="">
                    <option value="">综合</option>
                    <option value="">新品优先</option>
                    <option value="">评论数从高到低</option>
                </select>
                <!--下拉菜单右边部分-->
                <router-link to="">销量</router-link>
                <router-link to="">价格</router-link>
                <router-link to="">筛选 <span class="iconfont icon-shaixuan"></span>
                </router-link>
            </div>
        </div>
        <!--中间商品展示部分-->
        <div class="big_cake">
            <div class="row row-cols-2 row-cols-md-2">
                <div v-for="(val,index) in arr" :key="index" class="col mb-4">
                    <!--卡片展示商品部分-->
                    <div class="card">
                        <!--商品跳转详情页-->
                        <router-link to="/detaile" @click.native="skipdetail(index)">
                            <img :src="val.src" class="card-img-top" alt="...">
                        </router-link>
                        <div class="card-body">
                            <h6 class="card-title">
                                <router-link to="/detaile" @click.native="skipdetail(index)">{{val.name}}</router-link>
                            </h6>
                            <p class="card-text">
                                <span><router-link to="/detaile" @click.native="skipdetail(index)">￥{{val.price}}</router-link></span>
                                <!--购物车字体图标-->
                                <span class="iconfont icon-gouwuche" v-on:click="show_cover(index)" :key="index"></span>
                            </p>
                        </div>
                    </div>       
                </div>
            </div>
             <!--点击购物车时的遮罩层部分-->
             <div id="cover" v-show="flag==true" v-on:click="hide_cover"></div>
             <!--商品盒子弹出框-->
             <div id="box" :title="index"  :class="{box1:isActive}">
                 <!--删除按钮-->
                 <p v-on:click="hide_cover">
                     <router-link to="" class="iconfont icon-shanchu"></router-link>
                 </p>
                 <!--商品选择部分-->
                 <div class="num_chose">
                     <div class="goods">
                         <div><img :src="src" alt=""></div>
                         <div>
                             <div>{{name}}</div>
                             <p>￥{{price}}</p>
                             <select name="" v-model="selec">
                                 <option value="8寸">尺寸：8寸</option>
                                 <option value="10寸">尺寸：10寸</option>
                                 <option value="12寸">尺寸：12寸</option>
                                 <option value="14寸">尺寸：14寸</option>
                                 {{selec}}
                             </select>
                         </div>
                     </div>
                     <!--数量加减-->
                     <div class="num">
                         <span>购买数量</span>
                         <div class="cul">
                             <button @click="del(index)">-</button>
                             <span>{{num}}</span>
                             <button @click="add(index)">+</button>
                         </div>
                     </div>
                 </div>
                 <!--按钮部分-->
                 <div class="btn">
                     <button @click="addToCar()">确定</button>
                     <button @click=" hide_cover()">取消</button>
                 </div>
             </div>
            <!--<p class="more"><router-link to="">查看更多</router-link></p>-->
        </div>
        <div class="non"></div>
        <router-view></router-view>
    </div>
</template>
<script>
    import bus from '../bus.js'
    export default {
        name: "birthdayCake",
        components:{},
        data(){
            return{
                selec:'8寸',
                isActive:false,  //商品弹出框开关
                flag:0,           //遮罩层开关
                array:{},         //存放从总库获取的数据
                id:'',
                store_name:'',
                src:'',
                name:'',
                price:'',
                cakeSize:'',
                num:null,
                index:null,
                arr:[
                    {
                        id:1,store_name:'喜洋洋蛋糕店',src:'./img/goods1.jpg',name:'发声情人节女神款',price:169,cakeSize:8,num:1,
                        lunbo:[
                            {img_id:0,src:'./img/big_goods1.jpg',class:'active'},
                            {img_id:1,src:'./img/big_goods1_detaile.jpg',class:''}
                        ],
                        detaile:[
                            {src:'./img/big_goods1.jpg'},
                            {src:'./img/big_goods1_detaile.jpg'},
                            {src:'./img/detaile1.jpg'},
                            {src:'./img/detaile2.jpg'},
                            {src:'./img/detaile3.jpg'},
                            {src:'./img/detaile4.jpg'},
                            {src:'./img/detaile5.jpg'}
                        ]},
                    {id:2,store_name:'美洋洋蛋糕店',src:'./img/goods2.jpg',name:'草莓水果蛋糕',price:179,cakeSize:8,num:1,
                    lunbo:[
                    {img_id:0,src:'./img/big_goods1.jpg',class:'active'},
                    {img_id:1,src:'./img/big_goods1_detaile.jpg',class:''}
                ],
                detaile:[
                    {src:'./img/goods2.jpg'},
                    {src:'./img/detaile2_2.jpg'},
                    {src:'./img/detaile2_3.jpg'},
                    {src:'./detaile1.jpg'},
                    {src:'./img/detaile2_1.jpg'},
                ]},
                    {id:3,store_name:'懒洋洋蛋糕店',src:'./img/goods3.jpg',name:'可爱白兔蛋糕',price:168,cakeSize:8,num:1,
                        lunbo:[
                            {img_id:0,src:'./img/big_goods3.jpg',class:'active'},
                            {img_id:1,src:'./img/detaile3_2.jpg',class:''}
                        ],
                        detaile:[
                            {src:'./img/big_goods1.jpg'},
                            {src:'./img/big_goods1_detaile.jpg'},
                            {src:'./img/detaile3_4.jpg'},
                            {src:'./img/detaile3_5.jpg'},
                            {src:'./img/detaile3_6.jpg'},
                            {src:'./img/detaile3_7.jpg'},
                            {src:'./img/detaile4_5.jpg'}
                        ]},
                    {id:4,store_name:'可爱多蛋糕店',src:'./img/goods4.jpg',name:'粉色少女心蛋糕',price:169,cakeSize:8,num:1,
                        lunbo:[
                            {img_id:0,src:'./img/goods4.jpg',class:'active'},
                            {img_id:1,src:'./img/detaile4_1',class:''}
                        ],
                        detaile:[
                            {src:'./img/detaile4_1.jpg'},
                            {src:'./img/detaile4_2.jpg'},
                            {src:'./img/detaile4_3.jpg'},
                            {src:'./img/detaile4_4.jpg'},
                            {src:'./img/detaile4_5.jpg'},
                        ]},
                    {id:5,store_name:'青青草原蛋糕店',src:'./img/goods5.jpg',name:'蓝莓甜心蛋糕',price:199,cakeSize:8,num:1,
                        lunbo:[
                            {img_id:0,src:'./img/goods5.jpg',class:'active'},
                            {img_id:1,src:'./img/detaile5_1.jpg',class:''}
                        ],
                        detaile:[
                            {src:'./img/detaile5_1.jpg'},
                            {src:'./img/detaile5_2.jpg'},
                            {src:'./img/detaile5_3.jpg'},
                            {src:'./img/detaile5_4.jpg'},
                            {src:'./img/detaile5_5.jpg'},
                        ]
                    },
                    {id:6,store_name:'灰太狼蛋糕店',src:'./img/goods6.jpg',name:'草莓花生蛋糕',price:169,cakeSize:8,num:1,
                        lunbo:[
                            {img_id:0,src:'./img/goods5.jpg',class:'active'},
                            {img_id:1,src:'./img/detaile5_1.jpg',class:''}
                        ],
                        detaile:[
                            {src:'./img/detaile5_1.jpg'},
                            {src:'./img/detaile5_2.jpg'},
                            {src:'./img/detaile5_3.jpg'},
                            {src:'./img/detaile5_4.jpg'},
                            {src:'./img/detaile5_5.jpg'},
                        ]
                    },
                ],
            }
        },
        methods:{
            show_cover(index){
                if(localStorage.getItem('user')==undefined){
                    //如果用户名不存在，则商品不能加入购物车
                    if(confirm("您还未登录，立即登录？")){
                        location.href = '/view_login'
                    }
                }else{
                    //将点击的每条数据赋值给return全局中
                    this.index = index
                    this.id = this.arr[index].id;
                    this.store_name = this.arr[index].store_name;
                    this.src = this.arr[index].src;
                    this.name = this.arr[index].name;
                    this.price = this.arr[index].price;
                    // this.cakeSize=this.arr[index].cakeSize;
                    this.cakeSize = this.selec
                    this.num = this.arr[index].num;
                    this.flag = true;  //遮罩层开关
                    this.isActive = true;  //商品弹出框开关
                }  
            },
            hide_cover(index){
                this.$store.state.shopCar.splice(index,1);  //点击取消时从购物车删除
                this.flag=false;
                this.isActive=false;
            },
            addToCar(){
                this.flag=false;
                this.isActive=false;
                var obj={};
                obj.id=this.id;
                obj.store_name=this.store_name;
                obj.src=this.src;
                obj.name=this.name;
                obj.price=this.price;
                obj.cakeSize=this.selec;
                obj.num=this.num;
                console.log(obj);
                this.$store.commit("clickCar",obj); 
                alert("加入购物车成功");
            },
            // 弹出框数量加减
            add(index){
                if(this.num<999){
                    this.num++
                }else if(this.num>999){
                    this.num=999;
                }
            },
            del(index){
                if(this.num>1){
                    this.num--
                }else if(this.num<=1){
                    this.num=1;
                }
            },
            skipdetail(index) {  //跳转详情页
                var obj = this.arr[index];
                setTimeout(()=>{
                    bus.$emit('goods',obj); //传数据到详情页中
                },100)
            }
        },
        mounted(){
            //从服务器获取数据
            // this.$axios.get('http://8.129.85.29:3002/birthdayCake').then((data)=>{
            //     this.arr =JSON.parse(data.data[0].arr);  //JSON字符转成数组
            // }).catch((err)=>{
            //     console.log(err);
            // })
        }
    }
</script>

<style lang="less" scoped>
    /*顶部导航部分*/
    .title_bgc{
        width: 100%;
        background: white;
        border-bottom: 1px solid #ddd;
    }
    /*设置顶部导航部分*/
    .title_nav{
        display: flex;
        padding: 20px 10px 0;
    }
    /*返回键*/
    .title_nav a{
        flex: 1;
        font-size: 26px;
        text-decoration: none;
        line-height: 25px;
        color: black;
    }
    /*搜索框*/
    .title_nav p{
        flex: 4;
        width: 100%;
    }
    .title_nav p input{
        width: 100%;
        height: 30px;
        border-radius: 20px;
        border: none;
        background: #eee;
        padding: 5px 15px;
        outline: none;
    }
    /*顶部小图标*/
    .title_nav div{
        flex: 2;
        width: 100%;
        display: flex;
        justify-content:space-around ;
        margin-left: 15px;
    }
    .title_nav div span{
        flex: 1;
    }
    /*中间筛选导航部分*/
    .mid_nav{
        display: flex;
        padding: 10px;
        justify-content: space-between;
    }
    /*下拉菜单*/
    .mid_nav select{
        width: 54px;
        outline: none;
        border: none;
        overflow: hidden;
        text-overflow: clip;
        background: white;
    }
    .mid_nav select option{
        width: 100%;
        background: white;
        border: none;
    }
    .mid_nav a{  /*清除所有a标签下划线*/
        text-decoration: none;
    }
    .mid_nav>a{
        color: black;
        line-height: 38px;
    }
    .btn{
        border: none;
        background: none;
        outline: none;
        color: black;
    }
    /*商品展示部分*/
    .big_cake{
        padding:10px 15px;
        background: #eee;
    }
    /*清除所有a的默认样式*/
    .big_cake .row .col a{
        text-decoration: none;
        color: black;
    }
    /*卡片盒子文字部分样式*/
    .big_cake .row .col .card .card-body{
        padding: 0.5rem;
    }
    /*购物车字体图标*/
    .card-body p span:last-child{
        /*float: right;*/
        position: relative;
        color: black;
    }
    /*商品字体颜色设置*/
    .card .card-body h6{
        color: black;
    }
    /*价格样式*/
    .card-body .card-text span a{
        font-weight: bold;
        color: red !important;
    }
    /*修改卡片样式*/
    .mb-4, .my-4 {
        margin-bottom: 0.5rem !important;
    }
    /*修改卡片边距*/
    .big_cake .col{
        margin: 0 0 5px ;
        padding: 0 5px;
    }
    /*底部空盒子*/
    .non{
        height: 50px;
    }
    /*以下是遮罩层部分*/
    #cover{
        /*固定定位*/
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: rgba(0,0,0,.15);
    }
    /*弹出框商品图片和文字信息左右设置弹性布局*/
    .big_cake #box{
        width: 100%;
        padding: 1rem;
        background: white;
        position: fixed;
        left: 0;
        bottom: -355px;
        transition: all linear 0.5s;
    }
    #box .num_chose .goods{
        display: flex;
    }
    /*弹出框删除按钮*/
    #box>p{
        text-align: right;
    }
    #box p .iconfont{
        color: black;
    }
    /*弹出框装图片的盒子*/
    #box .num_chose .goods div:first-child{
        flex:2;
    }
    /*弹出框装商品信息的盒子*/
    #box .num_chose .goods div:last-child{
        flex: 3;
        margin-left: 20px;
    }
    .box1{
        bottom: 55px !important;
    }
    .goods{
        display: flex;
    }
    /*弹框商品标题部分*/
    .goods div:last-child>div{
        margin-bottom: 10px;
    }
    /*弹出框商品价格部分*/
    .goods div:last-child>p{
        color: red;
    }
    /*尺寸选择部分*/
    .goods div:last-child select{
        margin-top: 20px;
        border-radius: 10px;
        outline: none;
        border: none;
        color: #aaa;
        background: white;
    }
    /*数量部分*/
    .num{
        display: flex;
        justify-content: space-between;
        margin: 1rem 0;
    }
    /*+ -按钮公共样式*/
    .num .cul button{
        display: inline-block;
        width: 35px;
        padding:3px 8px;
        background: #eee;
        border: 1px solid #eee;
        outline: none;
    }
    /*“+”*/
    .num .cul button:first-child{
        border-bottom-left-radius: 10px;
        border-top-left-radius: 10px;
    }
    /* - */
    .num .cul button:last-child{
        border-bottom-right-radius: 10px;
        border-top-right-radius: 10px;
    }
    /*数字部分*/
    .num .cul span{
        width: 50px;
        box-sizing: border-box;
        padding: 3px 8px;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        display: inline-block;
        text-align: center;
    }
    /*弹出框确认取消按钮部分*/
    #box .btn{
        display: flex;
        justify-content: space-between;
    }
    /*弹出框确认取消按钮*/
    #box .btn button{
        width: 45%;
        height: 40px;
        border-radius: 20px;
        background:#D7635D ;
        color: white;
        border: none;
        outline: none;
    }
</style>